<template>
  <!-- //搜素区 -->
  <div class="search">
    <el-button size="small" type="primary">添加</el-button>
  </div>
  <!-- //表格区 -->
  <el-table size="mini" :data="data.tableData" style="width: 100%">
    <el-table-column prop="roleId" label="角色编号" width="180" />
    <el-table-column prop="roleName" label="角色名称" width="180" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          size="small"
          type="warning"
          @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- //抽屉区 -->
  <el-drawer
    v-model="openDrawer"
    title="I am the title"
    direction="rtl"
    :before-close="drawerClose"
  >
    <span>Hi, there!</span>
  </el-drawer>
</template>

<script setup>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { list } from '../../api/role'

let data = reactive({
  //表格数据
  tableData: [],
  //是否打开抽屉
  openDrawer: true,
})

//加载表格数据的方法
// let loadTable = async () => {
//   let r = await list()
//   console.log(r)
//   data.tableData.push(r.list[0])
//   console.log('r--', data.tableData)
// }
//执行加载表格数据的方法
// await loadTable()

onMounted(async () => {
  let roleData = await list()
  console.log(roleData)
  data.tableData = roleData.list
  console.log('r', data.tableData)
})

// const tableData = [
//   {
//     roleId: 'Tom',
//     roleName: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     roleId: 'Tom1',
//     roleName: 'No. 189, Grove St, Los Angeles',
//   },
// ]
</script>

<!-- <script>
//导入操作角色ApI方法

import { reactive, toRefs } from 'vue'
import { list } from '../../api/role'
export default {
  name: 'UserRole',
  async setup() {
    // list()
    let data = reactive({
      //表格数据
      tableData: [],
    })
    //加载表格数据的方法
    let loadTable = async () => {
      let r = await list()
      data.tableData = r
      console.log('r--', r)
    }
    //执行加载表格数据的方法
    await loadTable()
    return {
      data,
    }
  },
}
</script> -->

<style scpoed lang="scss"></style>
